<template>
  <div class="title">用户管理</div>

  <el-table :data="tableData" style="width: 100%" class="table">
    <el-table-column prop="id" label="序号" align="center" />
    <el-table-column prop="userName" label="用户名" align="center" />
    <el-table-column prop="birthday" label="生日" align="center" />
    <el-table-column prop="age" label="年龄" align="center" />
    <el-table-column prop="gender" label="性别" align="center" />
    <el-table-column prop="avatar" label="头像" align="center" />
    <el-table-column prop="area" label="地区" align="center" />
    <el-table-column prop="address" label="地址详情" align="center" />
    <el-table-column prop="nickName" label="昵称" align="center" />

    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.row)"> 删除 </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <el-pagination
    background
    layout="prev, pager, next"
    :total="total"
    v-model:current-page="count"
    @change="pageChange"
    :page-size="limitNum"
  />

  <!-- 编辑弹框 -->
  <el-drawer v-model="drawerVisible" direction="rtl">
    <template #header>
      <h4>编辑用户信息</h4>
    </template>

    <template #default>
      <el-form :model="editObj" label-width="auto">
        <el-form-item label="用户昵称:">
          <el-input v-model="editObj.nickName" />
        </el-form-item>

        <el-form-item label="用户生日:">
          <el-input v-model="editObj.birthday" />
        </el-form-item>

        <el-form-item label="用户年龄:">
          <el-input v-model="editObj.age" />
        </el-form-item>

        <el-form-item label="用户性别:">
          <el-input v-model="editObj.gender" />
        </el-form-item>

        <el-form-item label="头像:">
          <el-input v-model="editObj.avatar" />
        </el-form-item>

        <el-form-item label="地区:">
          <el-input v-model="editObj.area" />
        </el-form-item>

        <el-form-item label="地址详情:">
          <el-input v-model="editObj.address" type="textarea" />
        </el-form-item>

        <!-- 上传图片 -->
        <el-upload
          v-model:file-list="fileList"
          action="http://192.168.12.37:3001/admin/file/upload"
          name="img"
          list-type="picture-card"
          :on-preview="handlePicturePreview"
          :on-remove="handleRemove"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>

        <!-- 预览弹框 -->
        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button @click="drawerVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </template>
  </el-drawer>
</template>

<script setup>
import { ref } from 'vue'
import { userRequest, userDelRequest, xgRequest } from '@/api/user'
import { Plus } from '@element-plus/icons-vue'

const tableData = ref([])
const count = ref(1)
const limitNum = ref(5)
const total = ref(0)

// 编辑状态
const drawerVisible = ref(false)
const editObj = ref({
  id: '',
  birthday: '',
  age: '',
  avatar: '',
  area: '',
  address: '',
  nickName: '',
  gender: '',
  imgs: [],
})

// 加载列表
function loadList() {
  userRequest(limitNum.value, count.value).then((res) => {
    tableData.value = res.data.data
    total.value = res.data.total
  })
}
loadList()

// 页码变更
function pageChange() {
  loadList()
}

// 处理删除
const handleDelete = async (row) => {
  await userDelRequest(row.id)
  loadList()
}

// 处理编辑
const handleEdit = (row) => {
  drawerVisible.value = true
  editObj.value = JSON.parse(JSON.stringify(row)) // 深拷贝防止影响原数据

  // 处理图片数据
  fileList.value = row.imgs?.map((img) => ({ name: img, url: img })) || []
}

// 处理保存
const onSubmit = async () => {
  try {
    // 处理上传图片数据
    let imgs = fileList.value.map((file) => (file.response ? file.response.fileUrl : file.url))

    await xgRequest(
      editObj.value.id,
      editObj.value.birthday,
      editObj.value.age,
      editObj.value.area, // 传递正确的地区字段
      editObj.value.address, // 传递正确的地址详情字段
      editObj.value.nickName, // 传递正确的昵称字段
      editObj.value.gender,
    )

    drawerVisible.value = false
    loadList()
  } catch (error) {
    console.error('保存失败', error)
  }
}

// 图片上传
const fileList = ref([])
const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePicturePreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true
}
</script>

<style scoped>
.title {
  width: 100%;
  height: 60px;
  background-color: rgb(255, 255, 255);
  line-height: 60px;
}
.table {
  margin-top: 20px;
}
</style>
